<template>
    <div class="common-layout">
        <el-container class="lay-container">
            <common-aside />
            <el-container class="r-container">
                <common-header />
                <el-main>
                    <!-- <keep-alive> vue2.X 的写法
                        <router-view />
                    </keep-alive>-->
                    <!-- vue3 keep-alive 写法 -->
                    <router-view v-slot="{Component, route}">
                        <transition :name="route.meta.transition || 'fade'" mode="out-in">
                            <keep-alive>
                                <component :is="Component" :key="route.meta.usePathKey ? route.path : undefined"></component>
                            </keep-alive>
                        </transition>
                    </router-view>
                    <!-- vue3 keep-alive 写法 -->
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<!-- <script setup>

</script> -->

<script>
import { defineComponent } from 'vue';
import CommonAside from '../components/CommonAside.vue';
import CommonHeader from '../components/CommonHeader.vue';
export default defineComponent({
    setup() {},
    components: {
        CommonHeader,
        CommonAside,
    },
});
</script>

<style lang="less" scoped>
.el-container {
    height: 100%;
}

.common-layout {
    height: 100%;

    .r-container {
        flex-direction: column;

        .el-aside {
            height: 100%;
            background: #545c64;
        }
    }
}

.el-main {
    padding-top: 0;
}
</style>
